<template>
  <div>
    <el-cascader
      v-model="list"
      :options="cateList"
      :props="{ label: 'cat_name', value: 'cat_id' }"
      @change="change"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "SelectGoodsCate",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list: this.value,
    };
  },
  computed: {
    ...mapState({
      cateList: (state) => state.cate.cateList,
    }),
  },
  methods: {
    ...mapActions("cate", ["getCate"]),
    change(val) {
      this.$emit("input", val);
    },
  },
  created() {
    if (this.cateList.length === 0) this.getCate();
  },
};
</script>

<style>
</style>